@use '@/assets/customVar.scss' as *;

.main {
  padding: 10px 0;
  // TODO:顶部选项栏
  .title {
    display: flex;
    align-items: center;
    .titleText {
      font-size: 18px;
      font-weight: 600;
      margin-right: 20px;
    }
    .titleContainer {
      ::v-deep(.el-radio-button) {
        .el-radio-button__inner {
          max-width: fit-content;
          overflow: visible;
          border-radius: 1.5625rem !important;
        }
      }
      max-width: 43.125rem;
      .el-radio-group {
        flex-wrap: nowrap;
      }
    }
  }
  // TODO:图表选择区
  .tabsCarouselItems {
    display: block;
    margin-top: 10px;
    .tabsContainer {
      .scrollToleft {
        position: absolute;
        z-index: 10;
        left: 0;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 24px;
        height: 40px;
        border: none;
        box-shadow:
          0px 2px 4px 0px rgba(0, 0, 0, 0.14),
          0px 0px 2px 0px rgba(0, 0, 0, 0.12);
        border-radius: 5px;
        background: $bg-default-color;
        &:hover {
          background: $bg-hover-color;
          cursor: pointer;
          transform: translate(-50%, -50%) scale(1.5);
        }
      }
      .scrollToright {
        position: absolute;
        z-index: 10;
        right: 0;
        top: 50%;
        transform: translate(50%, -50%);
        width: 24px;
        height: 40px;
        border: none;
        box-shadow:
          0px 2px 4px 0px rgba(0, 0, 0, 0.14),
          0px 0px 2px 0px rgba(0, 0, 0, 0.12);
        border-radius: 5px;
        background: $bg-default-color;
        &:hover {
          background: $bg-hover-color;
          cursor: pointer;
          transform: translate(50%, -50%) scale(1.5);
        }
      }
      position: relative;
      .tabsCarousel {
        display: flex;
        flex-direction: row;
        position: relative;
        overflow: hidden;
        .tabsCarouselItems-DS {
          height: 132px;
          margin: 0 10px;
          // 移除第一个和最后一个的margin
          &:first-child {
            margin-left: 0;
          }
          &:last-child {
            margin-right: 0;
          }
          &.active .tabDailyItem-DS {
            .tabDailyButton {
              width: 188px !important;
              border-bottom-left-radius: 0 !important;
              border-bottom-right-radius: 0 !important;
              background: $bg-active-color;
              height: 132px;
            }
          }
          &.active .tabDailyItem-DS {
            .tabDailyItemBg {
              .tabDailyItemBgContent-DS {
                // 激活样式
                background: $bg-active-color;
              }
            }
            &::before {
              content: '';
              position: absolute;
              width: 32px;
              height: 32px;
              border-radius: 50%;
              box-shadow: 0 0 0 16px $bg-active-color;
              clip-path: inset(50% -0px -0px 50%);
              left: -31px;
              bottom: 0;
              transform: scale(1);
            }
            &::after {
              content: '';
              position: absolute;
              width: 32px;
              height: 32px;
              border-radius: 50%;
              box-shadow: 0 0 0 16px $bg-active-color;
              clip-path: inset(0% -0px 50% 50%);
              right: -32px;
              bottom: 0;
              transform: scale(-1);
            }
          }
          &:not(.active) {
            .tabDailyItem-DS .tabDailyButton:hover {
              background: $bg-hover-color; //只有在未激活时才应用hover效果
            }
          }
          // TODO:添加动画
          // transform: translateX(0rem);
          // column-gap: 9.3px;
          display: flex;
          position: relative;
          flex-direction: row;
          column-gap: 10px;
          z-index: 1;
          transition-duration: 1s;
          transition-timing-function: ease;
          .tabDailyItem-DS {
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: row;
            background: none;
            position: relative;
            .tabDailyItemBg {
              position: absolute;
              top: 0;
              height: 100%;
              height: 100%;
              unicode-bidi: isolate;
              .tabDailyItemBgContent-DS {
                height: 100%;
                padding: 0;
                margin: 0;
                border-radius: 10px 10px 0 0;
                position: absolute;
                width: 100%;
                top: 0%;
              }
            }
            // 每一项
            .tabDailyButton {
              padding: 10px;
              display: flex;
              justify-content: center;
              flex-direction: row;
              border-radius: 16px;
              background: $bg-default-color; //初始颜色
              overflow: hidden;
              border: none;
              position: relative;
              cursor: pointer;
              width: 158px;
              transition: width 0.5s ease;
              height: 120px;
              // &:hover {
              //   background: $bg-hover-color; //hover时颜色
              // }
              .tabContent {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                .dateSection {
                  // color: $bg-default-color;
                  font-size: 14px;
                  font-weight: 400;
                  display: flex;
                  width: 100%;
                  align-items: center;
                  justify-content: space-between;
                }
                .conditionSection {
                  overflow: visible;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-direction: row;
                  gap: 2px;
                  gap: 18px;
                  margin-top: 12px;
                  height: 64px;
                  .tempIco {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    div {
                      display: flex;
                      flex-direction: row;
                      justify-content: center;
                      align-items: center;
                      i {
                        font-size: 45px;
                      }
                    }
                  }
                  .tempArea {
                    display: flex;
                    flex-direction: column;
                    font-size: 20px;
                  }
                }
              }
            }
          }
        }
      }
    }
    .illustration-T {
      width: 100%;
      height: 500px;
      background: $bg-active-color;
      border-radius: $border-radius;
    }
  }
}
